<!-- AppAbout.vue - 关于我组件 -->
<template>
  <!-- 关于我区块 -->
  <section class="about section" id="about">
    <!-- 区块标题，使用i18n国际化 -->
    <h2 class="section__title">{{ $t('about__title') }}</h2>
    <!-- 区块副标题，使用i18n国际化 -->
    <span class="section__subtitle">{{ $t('about__subtitle') }}</span>
    <!-- 关于我内容容器，使用网格布局 -->
    <div class="about__container container grid">
      <!-- 个人照片 -->
      <img src="/img/portfolio3.jpg" class="about__img">

      <!-- 个人介绍内容 -->
      <div class="about__data">
        <!-- 个人描述文本，使用i18n国际化 -->
        <p class="about__description">
          {{ $t('about__description') }}
        </p>

        <!-- 个人信息统计 -->
        <div class="about__info">
          <!-- 年龄信息 -->
          <div>
            <span class="about__info-title">30</span>
            <span class="about__info-name">{{ $t('about__info-name1') }}</span>
          </div>

          <!-- 工作经验信息 -->
          <div>
            <span class="about__info-title">9+</span>
            <span class="about__info-name">{{ $t('about__info-name2') }}</span>
          </div>
          <!-- 预留信息位置 -->
          <div>
            <span class="about__info-title"></span>
            <span class="about__info-name"></span>
          </div>
        </div>

        <!-- 简历按钮 -->
        <a href="https://slave1.500d.me/cvresume/0109333675/" target="_blank" class="button button--flex">
          {{ $t('download') }}
          <i class="alicon alicon-zhixiangyou button__icon"></i>
        </a>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
/* 关于我区块样式 */
.about {
  /* 容器网格布局 */
  &__container {
    /* 平板设备适配 */
    @include min-screen(568px) {
      grid-template-columns: repeat(2, 1fr);
    }
    /* 桌面设备适配 */
    @include min-screen(768px) {
      column-gap: 5rem; 
    }
  }

  /* 个人介绍内容区域 */
  &__data {
    max-width: 344px;
  }

  /* 个人照片样式 */
  &__img {
    width: 200px;
    border-radius: 0.5rem;
    justify-self: center;
    align-self: center;
    /* 桌面设备照片尺寸调整 */
    @include min-screen(768px) {
      width: 350px;
    }
  }

  /* 个人描述文本样式 */
  &__description {
    text-align: center;
    margin-bottom: var(--mb-2-5);
    /* 桌面设备文本对齐方式调整 */
    @include min-screen(768px) {
      text-align: initial;
    }
  }

  /* 个人信息统计区域样式 */
  &__info {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2-5);
    /* 桌面设备布局调整 */
    @include min-screen(768px) {
      justify-content: space-between;
    }
  }

  /* 信息标题样式 */
  &__info-title {
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
    margin-bottom: var(--mb-0-5);
  }

  /* 信息名称样式 */
  &__info-name {
    font-size: var(--smaller-font-size);
  }

  /* 信息标题和名称的共同样式 */
  &__info-title,
  &__info-name {
    display: block;
    text-align: center;
  }
}

/* 全局标题样式美化 */
.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-semi-bold);
  position: relative;
  padding-bottom: 0.5rem;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--first-color);
    border-radius: 2px;
  }
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
  text-align: center;
  color: var(--text-color-light);
}

/* 按钮样式 */
.button {
  display: inline-flex;
  align-items: center;
  background-color: var(--first-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
  transition: 0.3s;
  margin-top: var(--mb-2);
  
  &:hover {
    background-color: var(--first-color-alt);
    transform: translateY(-2px);
  }

  &__icon {
    font-size: 1.25rem;
    margin-left: var(--mb-0-5);
    transition: 0.3s;
  }

  &:hover &__icon {
    transform: translateX(0.25rem);
  }
}
</style>